import React from 'react';
import { Select, InputNumber } from 'antd';
import ItemInput from '../itemcomponent/ItemInput';
import { openNotificationWithIcon } from '../../../../../utils/comm';

const { Option } = Select;

class NumberConfig extends React.Component {

  constructor(props) {
    super(props);
    this.state = { params: '' };
    this.openNotificationWithIcon = openNotificationWithIcon.bind(this);
  }

  getNumValue = (value) => {
    const pattern = /^\d+((\.\d+)|(\.))?$/
    const { selectedItem = {} } = this.props;
    if (selectedItem.type === 'integer') {
      if (pattern.test(value)) {
        return parseInt(value, 0);
      }
    }
    return value;
  }

  onNumberChange = (value, type) => {
    const { selectedItem = {} } = this.props;
    const { params } = this.state;
    const selectedItemParam = selectedItem.params || {};
    const obj = {};
    obj[type] = value;
    const newParams = params || {};
    this.setState({ params: { ...selectedItemParam, ...newParams, ...obj } });
  }

  onNumberBlur = (value, type) => {
    const { selectedItem = {}, onBlur } = this.props;
    const { params } = this.state;
    const selectedItemParam = selectedItem.params || {};
    const newParams = { ...selectedItemParam, ...(params || {}) };
    if (type === 'minLength' && (newParams.maxLength || newParams.maxLength === 0)) {
      if (newParams.minLength > newParams.maxLength) {
        this.openNotificationWithIcon('warning', '', '最小值不能大于最大值');
        this.setState({ params: '' });
        return;
      }
    }
    if (type === 'maxLength' && (newParams.minLength || newParams.minLength === 0)) {
      if (newParams.maxLength < newParams.minLength) {
        this.openNotificationWithIcon('warning', '', '最大值不能小于于最小值');
        this.setState({ params: '' });
        return;
      }
    }
    if (onBlur && onBlur instanceof Function) {
      onBlur('params', newParams);
      this.setState({ params: '' });
    }
  }

  formatter = (value) => {
    return this.getNumValue(value);
  }

  parser = (value) => {
    return this.getNumValue(value);
  }


  render() {
    const {
      className = '',
      selectedItem = {},
      getInputViewValue = () => { },
      onChange = () => { },
      onBlur = () => { },
    } = this.props;
    const { params } = this.state;
    const numberParam = params || selectedItem.params || {};
    return (
      <React.Fragment>
        <ItemInput
          className={className}
          label='默认值：'
          maxLength={20}
          value={getInputViewValue('defaultValue', selectedItem.defaultValue)}
          onChange={(value) => onChange('defaultValue', value)}
          onBlur={(value) => { onBlur('defaultValue', value, true) }}
        />
        <div className={className}>
          <div className='item__lable'>数字类型：</div>
          <Select value={selectedItem.type} style={{ width: '100%' }} onChange={(value) => { onBlur('type', value) }}>
            <Option value="integer">整数</Option>
            <Option value="decimal">小数</Option>
          </Select>
        </div>
        <div className={className}>
          <div className='item__lable'>最小值：</div>
          <InputNumber
            placeholder='请输入最小值'
            maxLength={20}
            min={0}
            value={numberParam.minLength}
            onChange={(value) => { this.onNumberChange(value, 'minLength') }}
            onBlur={(ev) => { this.onNumberBlur(ev.target.value, 'minLength') }}
            step={selectedItem.type === 'decimal' ? 0.1 : 1}
            formatter={this.formatter}
            parser={this.parser}
          />
        </div>
        <div className={className}>
          <div className='item__lable'>最大值：</div>
          <InputNumber
            placeholder='请输入最大值'
            maxLength={20}
            min={0}
            value={numberParam.maxLength}
            onChange={(value) => { this.onNumberChange(value, 'maxLength') }}
            onBlur={(ev) => { this.onNumberBlur(ev.target.value, 'maxLength') }}
            step={selectedItem.type === 'decimal' ? 0.1 : 1}
            formatter={this.formatter}
            parser={this.parser}
          />
        </div>
      </React.Fragment>
    );
  }
}


export default NumberConfig;